<template>
  <div class="self_top">
    <div class="self_set" @click="e_goassets('/userInfo')"></div>
    <!-- 个人资料区域 -->
    <div class="self_info">
      <div class="self_userImgCon">
        <img class="self_userimg" :src="userData.img == undefined?userImg:userData.img"
             @click="e_goassets('/userInfo')">
      </div>
      <div class="self_userInfo">
        <span class="self_username" @click="e_goassets('/userInfo')">{{userData.nickName}}</span>
        <div class="self_grade">
          <span>会员身份:</span>
          <img class="self_gradeIcon" :src="identityImg[userData.userGrade]" alt="" height="20">
        </div>
        <div class="self_prop">
          <span>推广码：</span>
          <span>{{userData.selfRecommend}}</span>
          <div class="self_propIcon" @click="e_doshare">
          </div>
        </div>
      </div>
    </div>
    <!-- 个人资产 -->
    <!--<div class="self_assets">-->

      <!--<div class="self_assetsleft" @click="e_goassets('/balance')">-->
        <!--<span></span>-->
        <!--<span>可用资产：￥{{userData.remainingCount}}</span>-->
      <!--</div>-->
      <!--&lt;!&ndash; <div class="self_assetscenter" @click="e_goassets('/balance')">-->
        <!--<span>|</span>-->
      <!--</div> &ndash;&gt;-->
      <!--<div class="self_assetsright" @click="e_goassets('/integral')">-->
        <!--&lt;!&ndash; <span>{{userData.integralCount}}</span>-->
<!-- -       <span>我的积分</span> &ndash;&gt;-->
      <!--</div>-->
    <!--</div>-->
    <!--<div class="self_charge">-->
      <!--<div class="self_chargeIcon">-->
        <!--<span>充值</span>-->
        <!--<div class="docharge" @click="e_goassets('/recharge')">-->
          <!--<span>去充值</span>-->
        <!--</div>-->
      <!--</div>-->
    <!--</div>-->

    <!-- 分享 -->
    <div v-show="share" class="share-code">
      <div class="share-wrapper">
        <vue-qr :text="qrTest" qid="testid"></vue-qr>
        <div style="text-align: center;font-size: 16px">推广码：{{userData.selfRecommend}}</div>
        <div class="close">
          <Icon type="ios-close-circle-outline" @click="_closeShore"/>
        </div>
      </div>
      <div class="layer"></div>
    </div>
  </div>

</template>

<script>
  import userImg from '@imgs/self/user_img.png'
  import member0 from '@imgs/self/member0.png'
  import member1 from '@imgs/self/member1.png'
  import member2 from '@imgs/self/member2.png'
  import member3 from '@imgs/self/member3.png'
  import member4 from '@imgs/self/member4.png'
  import member5 from '@imgs/self/member5.png'
  import member6 from '@imgs/self/member6.png'
  import { vpost, sonpost, fpost, gpost, vlink } from '@api/axios'
  import { Connect } from '@api/apiUrl'
  import { tokenPost, jtpost, gtpost, tokenLink, jtget } from '@api/axiosByToken'
  import VueQr from 'vue-qr'

  export default {
    name: '',
    data() {
      return {
        userImg: userImg,
        identityImg: [member0, member1, member2, member3, member4, member5, member6],
        userData: {},
        share: false,
        qrTest: '',
      }
    },

    components: {
      VueQr,
    },
    computed: {},

    methods: {
      // 分享
      e_doshare() {
        // this.$store.state.share = true
        let txt = Connect.shareUrl + this.userData.selfRecommend
        this.qrTest = txt
        this.share = true
      },
      // 关闭分享
      _closeShore() {
        this.share = false
      },
      // 去积分
      e_goassets(p) {
        if (!this.$store.state.signed) {
          this.$router.push('/login')
          return
        }
        this.$router.push(p)
      },
      _getUserInfo() {
        let userId = window.localStorage.userId
        let userInfoID = {
          userId: userId,
        }
        this.$store.state.loadding = true
        tokenPost(tokenLink.user.info, userInfoID).then(re => {
          this.$store.state.loadding = false
          if (re.status == 0) {
            this.$store.state.balance = re.data.remainingCount
            this.$store.state.integral = re.data.integralCount
            this.userData = re.data
            // 设置全局个人头像
            this.$store.state.selfIcon = this.userData.img
          } else {
            this.$Message.success(re.msg)
          }
        })
      },
    },

    mounted() {
    },

    created() {
      this._getUserInfo()
    },
  }
</script>
<style>
  .share-code {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .share-code .share-wrapper .close {
    display: flex;
    margin-top: 10px;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    color: #999;
  }

  .share-code .layer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, .8);
    z-index: -1;
  }
</style>
